import myHomeUserInfoLess from "./myHomeUserInfo.module.less";
import {
  RobotOutlined,
  WeiboOutlined,
  GithubOutlined,
  GoogleOutlined,
} from "@ant-design/icons";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";

function MyHomeUserInfo() {
  const navigate = useNavigate();
  const tipsList = [
    {
      id: 1,
      title: "你的人生格言是什么?",
    },
    {
      id: 2,
      title: "你有哪些爱好?",
    },
    {
      id: 3,
      title: "你的人生信仰是什么?",
    },
  ];
  const [index, setIndex] = useState(0);
  useEffect(() => {
    const intervalId = setInterval(() => {
      setIndex((prevIndex) => {
        const newIndex = prevIndex < tipsList.length - 1 ? prevIndex + 1 : 0;
        console.log("执行了", newIndex);
        return newIndex;
      });
    }, 2000);
    // 清理定时器，防止内存泄漏
    return () => clearInterval(intervalId);
  }, [tipsList.length]); // 依赖项为 tipsList.length，确保在 tipsList 长度变化时重新设置定时器

  const lookSetting = () => {
    console.log("设置");
    navigate("/Setting");
  };
  return (
    <>
      <div className={myHomeUserInfoLess.myHomeUserInfoContent}>
        <div className="left_content">
          <div className="topuser_info">
            <div className="left_user_info">
              <div className="left_img">
                <img src="/public/img/20240201103842.png" alt="" />
              </div>
              <div className="right_userInfo">
                <div className="userName">陈不知代码</div>
                <div className="grand">
                  <img
                    src="/public/img/wirteDengji.avis"
                    alt=""
                    className="xie"
                  />
                  <img src="/public/img/dengji.svg" alt="" className="dengji" />
                  <img
                    src="/public/img/huizhang.avis"
                    alt=""
                    className="huizhang"
                  />
                </div>
                <div className="work">
                  <RobotOutlined />
                  <div className="name">前微软前端开发工程师</div>
                </div>
                <div className="other_input">+{tipsList[index].title}</div>
              </div>
            </div>
            <div className="right_share_and_setting">
              <div className="share">
                <WeiboOutlined />
                <GithubOutlined />
                <GoogleOutlined />
              </div>
              <div className="setting" onClick={lookSetting}>
                设置
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default MyHomeUserInfo;
